<template>
  <div class="home">
    <!--    <h1>Hello</h1>
        <el-button type="info">info</el-button>
        <el-button type="danger">danger</el-button>
        <el-button type="success">success</el-button>
        <el-tag>elTag</el-tag>
        <i class="fa fa-users"></i>-->

    <Header/>
    <el-container class="content">
      <Menu/>
      <el-container>
        <el-main>
          <Breadcrumb/>
          <div class="cont">
            <router-view/>
          </div>
        </el-main>
        <el-footer>
          <Footer/>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "@/common/Header.vue"
import Menu from "@/common/Menu.vue"
import Footer from "@/common/Footer.vue"
import Breadcrumb from "@/common/Breadcrumb.vue"

export default {
  name: 'HelloWord',
  components: {Footer, Menu, Header, Breadcrumb}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
/*h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.hello {
  background: yellow;
  .el-button {
    color: green;
  }
}*/

html body {
  margin: 0;
}


.home {
  width: 100%;
  height: 100%;

  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;

    .cont {
      margin: 20px 0;
    }
  }
}

</style>
